<template>
  <div class="popbox" v-if="show">
    <van-popup
      class="popup"
      v-model="show"
      position="bottom"
      :close-on-click-overlay="false"
    >
      <h3 class="title">
        <span class="close" @click="close">X</span>
        确认付款
      </h3>
      <div class="pmt">
        <p class="f30">￥10000.00</p>
      </div>
      <van-cell title="订单信息" value="充值" />
      <van-cell
        title="付款方式"
        :value="`${info.title}(${info.num})`"
        @click="chooseCard"
        is-link
      />
      <div class="big-btn" @click="submit">立即付款</div>
    </van-popup>
    <!-- 银行卡选择 -->
    <all-card v-if="showCard" @close="closeCard" />
  </div>
</template>

<script>
import allCard from "@/components/card/AllCard";
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showCard: false,
      info: {
        id: 2,
        name: "gh",
        title: "中国工商银行",
        num: "2222",
        img: "/img/gh_bg.e97ce208.png"
      }
    };
  },
  components: {
    allCard
  },
  methods: {
    close() {
      this.$emit("close");
    },
    chooseCard() {
      this.showCard = true;
    },
    closeCard(data) {
      console.log(data);
      this.showCard = false;
      if (data) this.info = data;
    },
    submit() {
      console.log("付款");
      this.$emit("pay");
    }
  }
};
</script>

<style lang="scss" scoped>
.popbox {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
}
</style>
